<template>
	<div class="nav-search">
		<hp-sticky-search
			v-model:searchType="state.searchType"
			v-model:searchContent="state.searchContent"
			v-model:transferContent="state.transferContent"
			@search="handleSearch"
			@transfer="handleTransfer"
		/>
	</div>
</template>
<script setup lang="ts">
// const appStore = useAppStore();
interface IEmits {
	(event: "update:searchContent", value: string): void;
	(event: "update:transferContent", value: any): void;
	(event: "update:searchType", value: number): void;
	(event: "update:loading", value: boolean): void;
	(event: "search"): void;
	(event: "transfer"): void;
}
const emits = defineEmits<IEmits>();
interface IProps {
	searchContent: any;
	transferContent?: any;
	searchType?: any;
}
const props = defineProps<IProps>();
const state = reactive({
	searchContent: useVModel(props, "searchContent", emits as any),
	transferContent: useVModel(props, "transferContent", emits as any),
	searchType: useVModel(props, "searchType", emits as any)
});
const handleSearch = () => {
	console.log("search", state.searchContent, state.searchType);
};
const handleTransfer = () => {
	console.log("search", state.searchContent, state.searchType);
};
</script>
<style lang="less" scoped>
.nav-search {
	@apply bg-white  w-full;
	box-sizing: border-box;
	:deep(.sp-sticky) {
		&_radio {
			@apply mr-4;
		}
		&_content {
			@apply px-0;
			.content-ipt {
				@apply pl-0;
			}
		}
		.basic-dict {
			.arco-radio-button {
				@apply h-2rem !leading-2rem;
			}
		}
	}
}
</style>
